import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Table} from 'antd';
import {SudokuBean} from '../../../../model/sudoku/Sudoku';
import {listStore, checkStore, searchStore} from '../SudokuStore';

declare let GLOBAL: any;

const columns = [{
    title: '应用名称',
    dataIndex: 'appName',
    key: 'appName'
}, {
    title: '平台',
    dataIndex: 'platform',
    key: 'platform'
}, {
    title: '地区',
    dataIndex: 'areaName',
    key: 'areaName'
}, {
    title: '类型',
    dataIndex: 'category',
    key: 'category',
    render: (text, record) => {
        let message = '';

        if (text !== null && text !== undefined) {
            message = (text === '0' ? '九宫格图标' : '底部菜单栏');
        }

        return <span>{message}</span>
    }
}, {
    title: '操作',
    key: 'operation',
    render: (text, record) => (
        <span>
            <a href="javascript:void(0);" onClick={() => {
                const {appName, platform, areaId, category} = record;
                checkStore.load({appName, platform, areaId, category})
            }}>查看</a>
        </span>
    )
}]

@observer
export class ListTable extends React.Component<any, any> {
    componentDidMount() {
        listStore.load();
    }

    handleTableChange = (pagination, filters, sorter) => {
        let searchParams = searchStore.getValuesWithName();

        listStore.load(_.assign(searchParams, {
            pageSize: pagination.pageSize,
            pageNumber: pagination.current
        }));
    }

    render() {
        return (
            <UserTable style={{paddingLeft: 10}}
                       columns={columns}
                       dataSource={listStore.data}
                       pagination={listStore.pagination}
                       onChange={this.handleTableChange}/>
        )
    }
}

class UserTable extends Table<SudokuBean<any>> {
}
